<template>
  <div class="app-container paper-home">
    <el-row :gutter="20">
      <!-- 个人信息卡片 -->
      <el-col :span="24">
        <el-card class="paper-info-card">
          <div slot="header" class="clearfix">
            <span><i class="el-icon-user-solid"></i> 个人信息</span>
          </div>
          <div class="info-content">
            <div class="info-item">
              <span class="label">姓名：</span>
              <span class="value">许博涵</span>
            </div>
            <div class="info-item">
              <span class="label">学院：</span>
              <span class="value">工程技术学院</span>
            </div>
            <div class="info-item">
              <span class="label">专业：</span>
              <span class="value">电子工程</span>
            </div>
            <div class="info-item">
              <span class="label">年级：</span>
              <span class="value">2021级</span>
            </div>
            <div class="info-item">
              <span class="label">学号：</span>
              <span class="value">2021010202</span>
            </div>
            <div class="info-item">
              <span class="label">导师：</span>
              <span class="value">李教授</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 毕业论文基本信息 -->
      <el-col :span="24" style="margin-top: 20px;">
        <el-card class="paper-info-card">
          <div slot="header" class="clearfix">
            <span><i class="el-icon-document"></i> 毕业论文基本信息</span>
          </div>
          <div class="info-content">
            <div class="info-item">
              <span class="label">论文题目：</span>
              <span class="value">基于物联网技术的智能环境监测系统研究与实现</span>
            </div>
            <div class="info-item">
              <span class="label">研究方向：</span>
              <span class="value">物联网、嵌入式系统、环境监测</span>
            </div>
            <div class="info-item">
              <span class="label">论文类型：</span>
              <span class="value">工程设计类</span>
            </div>
            <div class="info-item">
              <span class="label">完成日期：</span>
              <span class="value">2025年5月</span>
            </div>
            <div class="info-item">
              <span class="label">论文摘要：</span>
              <p class="abstract">
                本研究设计并实现了一个基于物联网技术的智能环境监测系统。该系统通过分布式传感器网络采集环境数据，
                包括温度、湿度、空气质量、光照强度等多种参数，并通过无线通信模块将数据传输至云端服务器进行存储和分析。
                系统采用边缘计算架构，实现了数据的实时处理和智能决策，能够在环境参数异常时自动触发预警机制。
                通过实际部署测试，系统在数据采集精度、传输可靠性和响应速度等方面表现优异，
                可为智慧城市、智慧农业等领域提供重要的技术支持。
              </p>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 论文研究成果 -->
      <el-col :span="24" style="margin-top: 20px;">
        <el-card class="paper-info-card">
          <div slot="header" class="clearfix">
            <span><i class="el-icon-trophy"></i> 论文研究成果</span>
          </div>
          <div class="info-content">
            <div class="achievement-item">
              <h4>研究成果列表</h4>
              <el-timeline>
                <el-timeline-item timestamp="2024年11月" placement="top">
                  <el-card>
                    <h5>发表学术论文</h5>
                    <p>在《电子测量与仪器学报》发表题为《基于LoRaWAN的低功耗环境监测网络设计》的学术论文一篇。</p>
                  </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="2024年9月" placement="top">
                  <el-card>
                    <h5>获得实用新型专利</h5>
                    <p>获得"一种基于边缘计算的智能环境监测装置"实用新型专利一项。</p>
                  </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="2024年7月" placement="top">
                  <el-card>
                    <h5>参与科研项目</h5>
                    <p>参与省级重点研发计划项目"物联网环境下的智能监测关键技术研究"。</p>
                  </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="2024年5月" placement="top">
                  <el-card>
                    <h5>获得学科竞赛奖项</h5>
                    <p>在"全国大学生电子设计竞赛"中获得一等奖。</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>

            <div class="achievement-item">
              <h4>技术创新点</h4>
              <el-tag type="success" effect="dark" class="innovation-tag">低功耗传感器网络</el-tag>
              <el-tag type="success" effect="dark" class="innovation-tag">边缘计算架构</el-tag>
              <el-tag type="success" effect="dark" class="innovation-tag">多源数据融合</el-tag>
              <el-tag type="success" effect="dark" class="innovation-tag">自适应采样算法</el-tag>
              <el-tag type="success" effect="dark" class="innovation-tag">远程智能控制</el-tag>
            </div>

            <div class="achievement-item">
              <h4>系统演示</h4>
              <el-button type="primary" icon="el-icon-video-camera" @click="showDemo">查看系统演示</el-button>
              <el-button type="info" icon="el-icon-document" @click="showPaper">查看论文全文</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'XubohanPaperHome',
  data() {
    return {
      // 组件数据
    }
  },
  mounted() {
    // 组件挂载后的初始化逻辑
  },
  methods: {
    showDemo() {
      this.$message.info('系统演示功能待实现')
    },
    showPaper() {
      this.$message.info('论文全文查看功能待实现')
    }
  }
}
</script>

<style scoped>
.paper-home {
  padding: 20px;
}

.paper-info-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.info-content {
  padding: 10px 0;
}

.info-item {
  margin-bottom: 15px;
  display: flex;
  align-items: flex-start;
}

.label {
  font-weight: bold;
  color: #606266;
  min-width: 100px;
}

.value {
  color: #303133;
  flex: 1;
}

.abstract {
  color: #303133;
  flex: 1;
  margin: 0;
  line-height: 1.8;
  text-indent: 2em;
}

.achievement-item {
  margin-bottom: 20px;
}

.achievement-item h4 {
  color: #606266;
  margin-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}

.innovation-tag {
  margin: 5px;
}

.el-timeline {
  padding-left: 20px;
}

.el-timeline-item__timestamp {
  color: #909399;
}

.el-card__body h5 {
  color: #303133;
  margin-bottom: 10px;
}

.el-card__body p {
  color: #606266;
  line-height: 1.6;
}
</style>